<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form ref="form" :rules="rules"  :model="form" label-width="100px" v-loading="loading" inline>
                    <el-form-item label="所属渠道" prop="source" required>
                        <select-app-source v-model="form.source" style="width: 160px;" :form="true" :clearboth="false"></select-app-source>
                    </el-form-item>
                    <el-form-item label="用户ID" prop="userId" required>
                        <el-input disabled v-model="form.userId" placeholder="用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label="玩家ID" prop="playerId" required>
                        <el-input disabled v-model="form.playerId" placeholder="玩家ID"></el-input>
                    </el-form-item>
                    <el-form-item label="玩家账号" prop="username">
                        <el-input disabled v-model="form.username" placeholder="玩家账号"></el-input>
                    </el-form-item>
                    <el-form-item label="玩家昵称" prop="nickname">
                        <el-input v-model="form.nickname" placeholder="玩家昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="绑定手机" prop="mobile">
                        <el-input v-model="form.mobile" placeholder="绑定手机"></el-input>
                    </el-form-item>
                    <el-form-item label="设备码" prop="uuid">
                        <el-input v-model="form.uuid" placeholder="设备码" @input="uuidChange"></el-input>
                    </el-form-item>
                    <el-form-item label="注册设备码" prop="registerUuid">
                        <el-input v-model="form.registerUuid" placeholder="注册设备码"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="IDFA" prop="idfa">-->
<!--                        <el-input v-model="form.idfa" placeholder="IDFA"></el-input>-->
<!--                    </el-form-item>-->
                    <el-form-item label="IMEI" prop="imei">
                        <el-input v-model="form.imei" placeholder="IMEI"></el-input>
                    </el-form-item>
                    <el-form-item label="OAID" prop="oaid">
                        <el-input v-model="form.oaid" placeholder="OAID"></el-input>
                    </el-form-item>
                    <el-form-item label="支付宝" prop="player.zfb">
                        <el-input v-model="form.player.zfb" placeholder="支付宝账号"></el-input>
                    </el-form-item>
                    <el-form-item label="支付宝姓名" prop="player.real_name">
                        <el-input v-model="form.player.real_name" placeholder="支付宝姓名"></el-input>
                    </el-form-item>
                    <el-divider></el-divider>

                    <el-form-item label=" ">
                        <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
                        <el-button @click="cancel">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    props: {
        data: {}
    },
    data() {
        return {
            loading: false,
            form: {},
            formDefault: {
                username: '',
                password: '',
                nickname: '',
                registerUuid: '',
                uuid: '',
                idfa: '',
                imei: '',
                oaid: '',
                mobile: '',
                source: '',
                player: {
                    zfb: '',
                    real_name: '',
                },
            },
            rules: {
                // user_id: [
                //     {required: true, message: '请选择用户', trigger: 'blur'},
                // ],
                // content: [
                //     {required: true, message: '输入内容', trigger: 'blur'},
                // ],
            },
            options: this.$store.state.user.options,
        }
    },
    watch: {
        data(newVal) {
            this.syncForm();
        },
    },
    methods: {
        // 只做更新
        getFormAction() {
            return 'user/Update';
            // return this.form.userId ? 'user/Update' : 'user/Store';
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                // 仅保留指定字段
                let form = this.$helper.deepClone(this.form);
                form.player = {
                    userId: form.player.userId,
                    playerId: form.player.playerId,
                    zfb: form.player.zfb,
                    real_name: form.player.real_name,
                };
                this.$prompt('请输入备注', '备注一下方便校对', {
                    inputPlaceholder: '非必填',
                }).then(({value}) => {
                    // 备注
                    form.remark = value;

                    this.loading = true;
                    this.$store.dispatch(this.getFormAction(), form).then(res => {
                        this.$message.success(res.data.message);
                        this.$emit('submit');
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            });
        },
        cancel() {
            this.$emit('cancel');
        },
        syncForm() {
            this.form = this.$helper.deepClone(Object.assign({}, this.data.userId ? this.data : this.formDefault));
        },
        uuidChange(uuid) {
            if (this.form.idfa) this.form.idfa = uuid;
            if (this.form.oaid) this.form.oaid = uuid;
            if (this.form.imei) this.form.imei = uuid;
            // 没有设备码时设置IMEI
            if (!this.form.idfa && !this.form.oaid && !this.form.imei) this.form.imei = uuid;
        }
    },
    created() {
        this.syncForm();
    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

